<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three-Demo</title>

    <!-- JQ -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>

    <style type="text/css">
      body {
        margin: 0;
        font-family: "tencent";
      }

      #canvas-frame {
        border: none;
        /* background-color: #eeeeee; */
      }

      .panel {
        border: 0;
        width: 270px;
        text-indent: 20px;
      }

      @font-face {
        font-family: "tencent";
        src: url("./assets/font/simhei.ttf");
      }
    </style>
  </head>
  <body>
    <div id="canvas-frame"></div>

    <!-- 精灵文字模板 -->
    <div class="panel" id="label1">
      <div
        class="panel-heading"
        style="background-color: rgba(161, 89, 41, 0.8); color: white;"
      >
        专线网络接入区
      </div>
      <div
        class="panel-body"
        style="background-color: rgba(72, 58, 46, 0.8); color: white;"
      >
        <p>区域机器总数：100</p>
        <p>高风险漏洞机器总数：10</p>
        <p>高风险漏洞机器占比：10%</p>
      </div>
    </div>
    <div class="panel" id="label2">
      <div
        class="panel-heading"
        style="background-color: rgba(161, 89, 41, 0.8); color: white;"
      >
        移动网络接入区
      </div>
      <div
        class="panel-body"
        style="background-color: rgba(72, 58, 46, 0.8); color: white;"
      >
        <p>区域机器总数：59</p>
        <p>低风险漏洞机器总数：5</p>
        <p>低风险漏洞机器占比：8%</p>
      </div>
    </div>

    <!-- 着色器 -->
    <script type="x-shader/x-vertex" id="vertexshader">
      varying vec2 vUv;
      void main() {
      	vUv = uv;
      	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    </script>
    <script type="x-shader/x-fragment" id="fragmentshader">
      uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;
      varying vec2 vUv;
      vec4 getTexture( sampler2D texelToLinearTexture ) {
      	return mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
      }
      void main() {
      	gl_FragColor = ( getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture ) );
      }
    </script>
  </body>
</html>
